<template>
  <div class="main-content">
    <div style="width: 90%; margin: 20px auto; display: flex">
      <el-card class="resizable-box" style="width: 100%">
        <div style="display: flex">
          <div style="margin-top: 10px;margin-left:20px;">
            <img width="120px" height="100px" :src="HospitalData.avatar" alt="" class="square-box">
          </div>
          <div style="flex: 3;margin-left: 40px">
            <div style="margin-top: 20px;font-size: 20px;font-weight: bold;color: #111;display: flex">
              <div>{{ HospitalData.name }}</div>
              <div class="square-box"
                   style="background-color: orange;color: white;margin-left: 10px;border-radius: 5px">{{ HospitalData.level }}
              </div>
              <div style="font-size: 16px;margin-left: 40px;color: #303133">客服电话：<LABEL>{{ HospitalData.phone }}</LABEL></div>
              <div style="height: 25px;font-size: 16px;margin-left: 40px">地址：<LABEL>{{ HospitalData.address }}</LABEL></div>
            </div>
            <div class="divider"/>
            <div style="margin-top: 10px">
              <div style="font-size: 16px; font-weight: bold; display: inline;">
                医院介绍:
              </div>
              <p style="font-size: 15px; color: #666666; margin-top: 5px; display: inline; margin-left: 5px;">
                {{HospitalData.introduction }}
              </p>
            </div>
          </div>
        </div>
      </el-card>
    </div>
    <div style="width: 90%; margin: 20px auto;">
      <el-card style="background-color: #f4f4f4;cursor: pointer">
          <span :class="{'active': selectedPower ==='综合'}" @click="selectPower('综合')">综合 <img
              src="../../../assets/imgs/其他/down.png"></span>
        <span :class="{'active': selectedPower ==='就诊量'}" @click="selectPower('就诊量')">就诊量 <img
            src="../../../assets/imgs/其他/down.png"></span>
        <span style="float: right;">找到<label style="color: orange">{{ this.total }}</label>位医生信息</span>
      </el-card>
      <el-card style="display: flex">
        <div style="margin-top: 20px" v-for="doctor in DoctorData" :key="doctor.id">
          <div style="display: flex">
            <div class="square-box" style="width: 50%;border:solid #F8F8F8;">
              <div style="display: flex">
                <div style="margin-top: 20px;">
                  <img :src="doctor.avatar" alt="" class="circle-image">
                </div>
                <div style="margin-left: 20px">
                  <div style="margin-left: 10px; margin-top: 20px; font-size: 16px;height:40px;display: flex">
                    <div style="display: flex;margin-top: 5px">
                      <div style="font-weight: bold">{{ doctor.name }}</div>
                      <div style="margin-left: 5px">{{ doctor.sex }}</div>
                      <div style="margin-left: 5px">{{ doctor.officeName }}</div>
                      <div style="margin-left: 15px;display: flex">
                        <div style="font-size: 15px;">挂号费<label style="color: red">¥{{ doctor.price }}</label></div>
                        <div style="font-size: 16px;margin-left: 2px">起</div>
                        <div style="margin-left: 20px">挂号量<label style="color: orange">{{ doctor.count }}</label></div>
                      </div>
                    </div>
                    <div style="margin-bottom: 50px">
                      <el-button type="warning" style="width: 140px;margin-left: 10px"
                                 @click="$router.push('/front/doctorDetail?id='+doctor.id)">查看医生详细信息
                      </el-button>
                      <el-button @click="chat(doctor.id)" type="success" style="font-size: 12px;margin-left: 10px;width: 120px">咨询医生</el-button>
                    </div>
                  </div>
                  <div class="divider"></div>
                  <div style="font-size: 15px; color: #666666;margin-top: 5px">
                    擅长:{{ doctor.skill }}
                  </div>
                </div>
              </div>
            </div>
            <div style="display: flex">
              <div>
                <div class="header-style">
                  <LABEL>预约</LABEL><br><LABEL>日期</LABEL>
                </div>
                <div style="margin-top:14px;font-size: 18px;font-weight: bold">
                  <LABEL style="margin-left: 30px">上午</LABEL>
                </div>
                <div style="border-bottom: 2px solid #efeeee;margin-top: 22px"></div>
                <div style="margin-top:14px;font-size: 18px;font-weight: bold">
                  <LABEL style="margin-left: 30px">下午</label>
                </div>
                <div style="border-bottom: 2px solid #efeeee;margin-top: 22px"></div>
                <div style="margin-top:14px;font-size: 18px;font-weight: bold">
                  <LABEL style="margin-left: 30px">晚上</label>
                </div>
                <div style="border-bottom: 2px solid #efeeee;margin-top: 22px"></div>
              </div>
              <div v-for="item in DatesAndWeekdays" :key="item.id" >
                <div class="header-style">
                  <LABEL>{{ item.date }}</LABEL><br><LABEL>{{ item.weekday }}</LABEL>
                </div>
                <div style="position: relative;">
                  <div style="margin-left: 20px;margin-top: 10px; position: absolute; left: 0; top: 0;">
                    <el-button type="success" @click="toReservation(doctor.id,item.date,'上午(7:00-11:00)')"
                               v-if="filteredPlanData(doctor.id,item.weekday,'上午')">预约</el-button>
                  </div>
                  <div style="border-bottom: 2px solid #efeeee; position: absolute; left: 0; top: 60px; width: 100%;"></div>
                  <div style="margin-left: 20px;margin-top: 10px; position: absolute; left: 0; top: 60px;">
                    <el-button type="success" @click="toReservation(doctor.id,item.date,'下午(14:00-18:00)')"
                               v-if="filteredPlanData(doctor.id,item.weekday,'下午')">预约</el-button>
                  </div>
                  <div style="border-bottom: 2px solid #efeeee;margin-top: 10px; position: absolute; left: 0; width: 100%;top: 110px;"></div>
                  <div style="margin-left: 20px;margin-top: 10px; position: absolute; left: 0; top: 120px;">
                    <el-button type="success" @click="toReservation(doctor.id,item.date,'晚上(20:00-24:00)')"
                               v-if="filteredPlanData(doctor.id,item.weekday,'晚上')">预约</el-button>
                  </div>
                  <div style="border-bottom: 2px solid #efeeee;margin-top: 10px; position: absolute; left: 0;width: 100%; top: 170px;"></div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="pagination">
          <el-pagination
              background
              @current-change="handleCurrentChange"
              :current-page.sync="pageNum"
              :page-sizes="[5, 10, 20]"
              :page-size="pageSize"
              layout="total, prev, pager, next"
              :total="total">
          </el-pagination>
        </div>
      </el-card>
    </div>
  </div>
</template>

<script>
export default {
  name: "reservation",
  data() {
    let HospitalId = this.$route.query.id
    return {
      user: JSON.parse(localStorage.getItem('xm-user') || '{}'),
      pageNum: 1,   // 当前的页码
      pageSize: 10,  // 每页显示的个数
      total: 0,
      hospitalId: HospitalId,
      HospitalData:{},
      countIsBoolean:false,
      PlanData:[],
      DoctorData:{},
      selectedContent1: '所有医院',
      selectedContent2: '所有科室',
      selectedContent3: '近一个星期内',
      selectedContent4: '上午',
      DatesAndWeekdays: {},
      selectedPower: '综合'
    }
  },
  created() {
    this.loadHospital()
    this.loadHospitalDoctor()
    this.getDatesAndWeekdays()
  },
  methods: {
    toReservation(id,date,time){
      if(this.user.role==="DOCTOR"){
        this.$message.warning("当前角色不支持该操作");
        return
      }
      this.$router.push({
        path: '/front/ReservationDetail',
        query: { doctorId: id, date: date, time:time }
      });
    },
    filteredPlanData(index, week, time) {
      if (index < 0 || index >= this.PlanData.length) {
        return false; // 索引无效，返回 false
      }
      const filteredData = this.PlanData[index];
      console.log(filteredData)
      return filteredData.some(data => data.week === week && data.time === time);
    },
    chat(chatId) {
      if(this.user.role==="DOCTOR"){
        this.$message.warning("当前角色不支持该操作");
        return
      }
      // 发送第一个请求以获取 chatRoleId1 和 chatRoleId2
      this.$request.post('/chatRole/add', { chatUserId: chatId, userId: this.user.id }).then(res => {
        if (res.code === '200') {
          // 获取返回的 mapData
          const resultMap = res.data;  // resultMap 应该包含 chatRoleId1 和 chatRoleId2
          // 从 resultMap 中提取 ID
          const chatRoleId1 = resultMap.chatRoleId1;
          const chatRoleId2 = resultMap.chatRoleId2;
          // 使用提取的 ID 发送第二个请求
          this.$request.post('/chatGroup/add', { chatUserId: chatRoleId1, userId: chatRoleId2 }).then(res => {
            if (res.code === '200') {
              // 请求成功，跳转到聊天页面
              this.$router.push('/front/chat');
            } else {
              // 显示错误信息
              this.$message.error(res.msg);
            }
          });
        } else {
          // 显示错误信息
          this.$message.error(res.msg);
        }
      });
    },
    loadHospital() {
      this.$request.get('/hospital/selectById?id=' + this.hospitalId).then(res => {
        if (res.code === '200') {
          this.HospitalData = res.data
        } else {
          this.$message.error(res.msg)
        }
      })
    },
    handleCurrentChange(pageNum) {
      this.loadHospitalDoctor(pageNum)
    },
    loadHospitalDoctor(pageNum) {
      if (pageNum) this.pageNum = pageNum
      this.$request.get('/doctor/selectByHospitalId', {
        params: {
          hospitalId: this.hospitalId,
          pageNum: this.pageNum,
          pageSize: this.pageSize,
        }
      }).then(res => {
        if (res.code === '200') {
          this.DoctorData = res.data?.list
          this.total = res.data?.total
          this.DoctorData.forEach(doctor => {
            this.PlanData[doctor.id] = [];
              doctor.planList.forEach(plan => {
              this.PlanData[doctor.id].push({
                week: plan.week.slice(0, 3), // 取 week 的前两个字符
                time: plan.time.slice(0, 2)  // 取 time 的前两个字符
              });
            });
          });
        } else {
          this.$message.error(res.msg);
        }
      });
    },
    selectPower(content) {
      this.selectedPower = content; // 设置当前选中的项
    },
    getDatesAndWeekdays() {
      // 获取今天的日期
      const today = new Date();
      // 创建一个空数组用于存储结果
      const result = [];
      // 星期名称数组
      const weekDayNames = ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"];
      // 遍历从今天开始的7天的日期
      for (let i = 0; i < 7; i++) {
        // 计算当前日期
        const currentDate = new Date(today);
        currentDate.setDate(today.getDate() + i);
        // 获取日期信息
        const month = currentDate.getMonth() + 1; // 月份从0开始
        const day = currentDate.getDate();
        const weekDayName = weekDayNames[currentDate.getDay()];
        // 将日期和星期名称添加到结果数组中
        result.push({
          date: `${month}月${day}日`, // 修改日期格式为月日形式
          weekday: weekDayName
        });
      }
      this.DatesAndWeekdays = result;
    }
  }
}
</script>

<style scoped>
.header-style {
  margin-left: 1px;
  font-size: 18px;
  line-height: 20px;
  font-weight: bold;
  width: 110px;
  text-align: center;
  background-color: #007D67;
  padding: 10px;
  box-sizing: border-box;
}


/* 修改表头背景色 */
/deep/ .el-table__header th {
  background-color: #007d67; /* 设置你想要的背景色 */
  color: #333; /* 设置文字颜色 */
  font-weight: bold; /* 可选：设置文字粗细 */
}


.help-hd .help-hd-ico {
  background: url(../../../assets/imgs/其他/problemIcon.png) no-repeat left center;
  padding-left: 50px;
}

.active:hover {
  color: #2db588;
}

.active {
  color: #2db588;
}
</style>
